import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col, Checkbox} from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';
import { queryRule, updateRule, addRule, removeRule } from '../service';
import styles from '../style.less';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { form, common, isUpdate, dataFormValues } = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [pictureLogo, setPictureLogo] = useState<any[]>([]);
  const [uploadLogoChanged, setUploadLogoChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');

  //提交表单
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      // 如果是更新
      if(isUpdate){
        fieldsValue.id = dataFormValues.id;
      }
      console.log("submit fields ", fieldsValue)

      // 如果更新成功之后，重置表单
      addRule(fieldsValue).then((success:any) => {
        console.log('handleSubmit then success is ', success)
        if(success){
          form.resetFields()
          setPicture([])
        }
      })

    });
  };

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

    // 设置Logo上传文件值
    const setLogoUploadFile = (fileList:any) => {
      setUploadLogoChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureLogo(fileArr)
        setPreviewImg(fileArr[0].file_url)
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureLogo([])
      }
    }

  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(dataFormValues.site_icon)
  const defaultLogoPicture = DataHelper.buildFileByUrl(dataFormValues.site_logo)

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const showUploadLogoButton = DataHelper.showUploadBtn(isUpdate, pictureLogo, defaultLogoPicture, uploadLogoChanged)

  const plainOptions = ['电子邮箱', '手机号', '微信快捷登录'];
  

  // 弹出框
  // @ts-ignore
  return <Card>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'钱包功能'} help="是否启用钱包功能">
        {form.getFieldDecorator('wallet_status', {
          // initialValue: isUpdate ? dataFormValues.wallet_status : '',
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Radio.Group buttonStyle="solid">
        <Radio value={false}>关闭</Radio>
        <Radio value={true}>启用</Radio>
        {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
      </Radio.Group>)}
      </FormItem>
    </Col>
    {form.getFieldValue('wallet_status') == true &&
      <>
      <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支付服务商'} help="可在应用市场获取更多服务商支持">
        {form.getFieldDecorator('wallet_service', {
          // initialValue: isUpdate ? dataFormValues.wallet_service : '',
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Checkbox.Group onChange={(list)=>{console.log(list)}}>
            <Checkbox value="account_terms_close">服务条款</Checkbox>
            <Checkbox value="account_privacy_close">隐私权政策</Checkbox>
        </Checkbox.Group>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'货币代码'} help="">
        {form.getFieldDecorator('wallet_currency_code', {
          // initialValue: isUpdate ? dataFormValues.wallet_currency_code : '',
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现功能'} help="钱包余额是否可以提现">
        {form.getFieldDecorator('wallet_cash_close', {
          // initialValue: isUpdate ? dataFormValues.wallet_cash_close : '',
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Radio.Group buttonStyle="solid">
        <Radio value={false}>关闭</Radio>
        <Radio value={true}>启用</Radio>
        {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
      </Radio.Group>)}
      </FormItem>
    </Col>
    </>
    }
    {
      form.getFieldValue('wallet_cash_close') == true && <>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现支持渠道'} help="可在应用市场获取更多的支持渠道">
            {form.getFieldDecorator('wallet_cash_bank', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_bank : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Checkbox.Group onChange={(list)=>{console.log(list)}}>
                <Checkbox value="account_terms_close">微信钱包</Checkbox>
                <Checkbox value="account_privacy_close">QQ 钱包</Checkbox>
            </Checkbox.Group>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现是否审核'} help="用户申请提现，是否需要人工审核">
            {form.getFieldDecorator('wallet_cash_review', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_review : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Radio.Group buttonStyle="solid">
            <Radio value={false}>不审核</Radio>
            <Radio value={true}>需审核</Radio>
            {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
          </Radio.Group>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现是否验证实名信息'} help="启用后，提现将验证真实姓名和身份证号">
            {form.getFieldDecorator('wallet_cash_verify', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_verify : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Radio.Group buttonStyle="solid">
            <Radio value={false}>不验证</Radio>
            <Radio value={true}>启用验证</Radio>
            {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
          </Radio.Group>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现间隔时间'} help="单位: 分钟，0 或不填则不限制">
            {form.getFieldDecorator('wallet_cash_interval_time', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_interval_time : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'提现手续费率'} help="百分比，0.1 代表 10%，0.06 代表 6%">
            {form.getFieldDecorator('wallet_cash_rate', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_rate : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'单次提现最小金额'} help="单位: 元">
            {form.getFieldDecorator('wallet_cash_min_sum', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_min_sum : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'单次提现最大金额'} help="单位: 元">
            {form.getFieldDecorator('wallet_cash_max_sum', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_max_sum : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'每日提现总金额上限'} help="单位: 元，整站用户所有提现的每日上限总金额">
            {form.getFieldDecorator('wallet_cash_sum_limit', {
              // initialValue: isUpdate ? dataFormValues.wallet_cash_sum_limit : '',
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
          </FormItem>
        </Col>
      </>
    }
    <Col span={15}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}}>保存</Button>
      </div>
    </Col>
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </Card>;
};

export default Form.create<DataFormProps>()(DataForm);
